<div class="nv-dialog">
  <div mat-dialog-title class="dialog-header">
    <div class="pull-left">
      {{'multiCluster.joining.title' | translate}}
    </div>
    <div class="pull-right">
      <em class="icon-close hand" (click)="onCancel()"></em>
    </div>
  </div>

  <div>
    <div mat-dialog-content class="dialog-content p0 m0">
      <form
        #clusterForm="ngForm"
        fxLayout="column"
        fxLayoutAlign="start"
        fxFlex="1 0 auto"
        class="pt-lg"
      >
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
            <mat-label>{{ "multiCluster.joining.name" | translate }}</mat-label>
            <input matInput [(ngModel)]="cluster.name" name="name" required />
          </mat-form-field>
        </div>
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{ "multiCluster.joining.server" | translate }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.host"
              name="cluster-host"
              required
            />
          </mat-form-field>
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{ "multiCluster.joining.port" | translate }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.port"
              name="cluster-port"
              required
            />
          </mat-form-field>
        </div>
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
            <mat-label>{{
              "multiCluster.joining.token" | translate
              }}</mat-label>
            <textarea
              matInput
              [(ngModel)]="cluster.token"
              name="token"
              required
              (blur)="parseToken()"
              (paste)="parseToken()"
            ></textarea>
            <mat-error></mat-error>
          </mat-form-field>
        </div>
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{
              "multiCluster.promotion.server" | translate
              }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.master_host"
              name="master-host"
              required
            />
          </mat-form-field>
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{
              "multiCluster.promotion.port" | translate
              }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.master_port"
              name="master-port"
              required
            />
          </mat-form-field>
        </div>

        <div class="col-sm-10 col-sm-offset-1 mt-sm">
          <label class="radio-inline c-radio">
            <input
              id="https"
              type="radio"
              name="proxy"
              [(ngModel)]="useProxy"
              value="https"
            />
            {{'multiCluster.USE_HTTPS_PROXY' | translate}}
          </label>
        </div>
        <div class="col-sm-10 col-sm-offset-1 mt-sm">
          <label class="radio-inline c-radio">
            <input
              id="none"
              type="radio"
              name="proxy"
              [(ngModel)]="useProxy"
              value=""
            />
            {{'multiCluster.NO_PROXY' | translate}}
          </label>
        </div>

        <div
          style="width: calc(80vw - 48px); max-width: 952px;"
          class="pl-4 help-block"
        >
          {{ "multiCluster.joining.hint" | translate }}
        </div>
      </form>
    </div>
    <div
      mat-dialog-actions
      class="dialog-actions pull-right"
      style="margin-right: 24px;"
    >
      <a class="modal-cancel-button" (click)="onCancel()">
        {{ "general.CANCEL" | translate }}
      </a>
      <button
        mat-button
        class="modal-submit-button"
        (click)="onConfirm()"
        [disabled]="clusterForm.invalid"
      >
        {{ "general.SUBMIT" | translate }}
      </button>
    </div>
  </div>
</div>
